<template>
	<s-layout title="会员升级" :bgStyle="{ color: '#f2f2f2' }">
		<view class="grade-box">
			<!-- <image :src="grade[0].img" mode=""></image> -->
			<!-- 等级 -->
			<view class="grade-grade" v-for="(item, index) in stats.grade" :key="index">
				<view class="grade"
					:style="{ backgroundImage: 'url(https://www.paopaomala.top' + item.image + ')' }"
					@click="btJump(item.id)">
					<!-- <image src="../../static/img/buyVIP/goldBg.png" mode=""></image> -->
					<!-- <view class="title"
						:style="{ backgroundImage: 'url(https://www.paopaomala.top' + item.image + ')', color: item.fontColor }">

					</view> -->
					<view class="center">
						<view class="center_left" :style="{ color: item.fontColor }">
							Lv.{{ index + 1 }} {{ item.grade }}
						</view>
						<!-- <view class="diff" :style="{color: item.fontColor}">还差{{item.val}}积分，可升级至{{grade[index+1].grade?grade[index+1].grade:'至尊会员'}} </view> -->
					</view>
					<!-- 进度条 -->
					<!-- <view class="progress-bar-container">
					<view class="progress-bar" style="width: 50%;" :style="{backgroundColor: item.fontColor}"></view>
				</view> -->
					<!-- 积分 -->
					<view class="integral" :style="{ color: item.fontColor }">
						<view class="left">
							<image :src="item.icon" mode="" class="icon"></image>
							<!-- <view>{{item.val}}/1000</view> -->
						</view>
						<!-- <view class="right">升级会员享受更多权益</view> -->
					</view>
					<image class="sign" :src="item.img" mode=""></image>
				</view>
			</view>
		</view>
	</s-layout>

</template>

<script setup>
// import {
// 	baseUrl
// } from '@/sheep/c2onfig';
// import Request from 'luch-request';
import {
	reactive,
	computed,
	watch
} from 'vue';
import {
	onLoad,
	onPageScroll,
	onShow
} from '@dcloudio/uni-app';
import sheep from '@/sheep';
const stats = reactive({
	grade: [
	]
})

async function getVip() {
	let res = await sheep.$api.trade.userLevel({
		vid: sheep.$store('user').userInfo.id
	});
	stats.grade = res.data;
	console.log(res)
}
async function onSubmit(item) {
	console.log(item);
	const { code, data } = await sheep.$api.trade.purchase(
		{ vid: item.id }
	);
	if (code === 1) {
		sheep.$router.go('/pages/pay/index', {
			orderSN: data.order_sn,
			type: 'purchase',
		});
	}
}
function btJump(id) {
	sheep.$router.go('/pages/buyvip/detail', {
		id: id,
	});
}

onShow(() => {
	getVip();
})
</script>

<style>
.grade-box {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding: 0 10rpx;
	overflow: hidden;
}
.grade-grade {
	width: 48%;
	overflow: hidden;
}

.grade {
	/*width: 48%; */
	height: 360rpx;
	border-radius: 30rpx;
	/* border: 1rpx #808080 solid; */
	margin: 16rpx auto;
	background-size: cover;
	/* 背景图片覆盖整个元素区域 */
	background-position: center;
	/* 背景图片居中 */
	position: relative;
}

.grade .title {
	width: 160rpx;
	height: 50rpx;
	background-size: cover;
	/* 背景图片覆盖整个元素区域 */
	background-position: center;
	/* 背景图片居中 */
	/* text-align: center; */
	padding-left: 26rpx;
	font-size: 24rpx;
	/* 		position: absolute;
		z-index: 2;
		top: 0;
		left: 0; */
}

.grade .sign {
	display: block;
	position: absolute;
	top: 60rpx;
	right: 40rpx;
	width: 180rpx;
	height: 160rpx;
}

.grade .center {
	margin-left: 40rpx;
	margin-top: 30rpx;
	font-size: 36rpx;
	font-weight: bold;
}

.diff {
	font-size: 25rpx;
	font-weight: 400;
}

.progress-bar-container {
	margin: 100rpx auto 0;
	width: 620rpx;
	background-color: #fff;
	border-radius: 2px;
	overflow: hidden;
}

.progress-bar {
	height: 5px;
	background-color: #5cb85c;
	text-align: center;
	line-height: 20px;
	color: white;
	border-radius: 4px;
	transition: width 0.5s ease;
}

.integral {
	display: flex;
	margin: 10rpx auto;
	width: 620rpx;
	justify-content: space-between;
	font-size: 24rpx;
}

.integral .left {
	display: flex;
	align-items: center;
	font-weight: bold;
}

.integral .left .icon {
	display: block;
	width: 25rpx;
	height: 25rpx;
	margin-right: 20rpx;
}
</style>